<template>
  <VabDrawer v-model="dialogFormVisible" :close-on-click-modal="true" show-fullscreen title="通知公告预览页面" width="50%">
    <div class="formbody">
      <h3 class="h3header">{{ noticeList.noticeTitle }}</h3>
      <p class="plabel">
        <span>发布人：{{ noticeList.publisher }}</span>
        <span>
          通知类型：
          <label>
            {{ noticeTypeName }}
          </label>
        </span>
        <span>发布时间：{{ noticeList.cts }}</span>
      </p>
      <div>发布状态：{{ publishStatus }}</div>
      <el-divider />
      <div class="divcon" v-html="noticeList.noticeContent"></div>
    </div>
    <template #footer>
      <el-button @click="handleClose">取 消</el-button>
    </template>
  </VabDrawer>
</template>

<script>
import { getDetails, getLocalStorage } from "@/api/mains";
import VabDrawer from "@/plugins/VabDialog/drawerModule.vue";

export default defineComponent({
  name: "NoticePreview",
  components: { VabDrawer },
  emits: {
    fetchData: null //fetchData事件没有检验
  },

  setup() {
    const state = reactive({
      url: "system/notice",
      noticeList: [],
      NoticeTypes: [],
      noticeTypeName: "",
      status: false,
      publishStatus: false,
      dialogFormVisible: false,
      enable: {
        id: ""
      }
    });

    const showDialog = row => {
      state.dialogFormVisible = true;
      state.noticeList.id = row.id;
      getNoticeList();
    };

    const getNoticeList = async () => {
      const res = await getDetails(state.url, state.noticeList.id);
      state.noticeList = res.data;
      state.NoticeTypes = getLocalStorage().NoticeTypes;
      state.NoticeTypes.forEach(item => {
        if ((item.dictValue = state.noticeList.noticeType)) {
          state.noticeTypeName = item.dictLabel;
        }
      });
      getPublishStatus();
    };

    //控制发布状态
    const getPublishStatus = () => {
      /*获取后台收到的status作比较1：激活发布状态true； 0：激活未发布/取消发布的状态false */
      if (state.noticeList.status == "1") {
        state.publishStatus = "停用";
      } else if (state.noticeList.status == "0") {
        state.publishStatus = "正常";
      }
    };

    //关闭
    const handleClose = () => {
      state.noticeList = [];
      state.dialogFormVisible = false;
    };

    return {
      ...toRefs(state),
      showDialog,
      handleClose,
      getNoticeList,
      getPublishStatus
    };
  }
});
</script>
<style lang="scss" scoped>
.plabel {
  font-size: 12px;
  color: #999999;
}
.plabel span {
  padding-right: 20px;
}
.divcon {
  margin-bottom: 20px;
  line-height: 25px;
  color: #333333;
}
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 50%;
  padding: 10px;
  text-align: center;
  background: #ffffff;
  border-top: 1px solid #dcdfe6;
}
.footer button {
  width: 25%;
  line-height: 20px;
}
.el-form {
  padding: 2% 0 10%;
  line-height: 20px;
}
.formbody {
  position: absolute;
  inset: 65px 0 60px 20px;
  padding-bottom: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  :deep() {
    .el-form-item,
    .el-input,
    .el-select,
    .el-textarea {
      width: 100% !important;
    }
    .el-form-item__content {
      width: 80%;
    }
  }
}
</style>
